<template>
  <div class="titletopXX">
    <van-nav-bar
      size="30"
      title="新增果切"
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
  </div>
  <div class="pull-refresh">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field label="选择果切">
          <template #input>
            <div class="">
              <div class="XXBOx">
                <div class="XX" v-for="(item, index) in tabS" :key="index">
                  <van-tag
                    :show="show"
                    closeable
                    size="large"
                    type="primary"
                    @close="close(item)"
                  >
                    {{ item.name }}
                  </van-tag>
                </div>
              </div>

              <div class="btn">
                <van-button
                  size="small"
                  icon="plus"
                  type="primary"
                  color="rgb(2, 117, 113)"
                  @click="TZXX()"
                />
              </div>
            </div>
          </template>
        </van-field>
        <van-field
          v-if="tabS.length > 0"
          v-model="XQname"
          is-link
          readonly
          label="果切分类"
          placeholder="点击选择分类"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请选择分类' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker
      :columns="columns"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import moment from "moment";
import { updateMealDishBack, queryFruitCategory } from "@/api/CPXX/index.js";
import { Dialog, Notify } from "vant";
const CPGLxx = ref(JSON.parse(localStorage.getItem("CPGLxx")));
const route = useRoute();
const router = useRouter();
const siteData = ref(JSON.parse(localStorage.getItem("siteData")) || {});
let showPicker = ref(false);
let tabS = ref([]);
let columns = ref([]);
let objXX = ref({
  mealId: CPGLxx.value.id,
  type: "3",
  categoryId: "1",
  siteId: siteData.value.id,
  mealtodishlist: [],
});
let XQname = ref("");
//获取
function getMZCPBQ() {
  queryFruitCategory({
    siteId: siteData.value.id,
  }).then((res) => {
    columns.value = res.data.map((item) => {
      var obj = {};
      return (obj = {
        text: item.categoryName,
        categoryType: item.categoryType,
        value: item.id,
      });
    });
    // console.log("11", columns3.value);
  });
}
getMZCPBQ();
//点击删除
function close(val) {
  console.log(val);
  Dialog.confirm({
    title: "删除操作",
    message: `是否删除【${val.name}】`,
  })
    .then(() => {
      tabS.value = tabS.value.filter((item) => item.id !== val.id);
    })
    .catch(() => {
      // on cancel
    });
}
//初始化
function CS() {
  if (route.query.XX) {
    let XX = JSON.parse(decodeURIComponent(route.query.XX));
    tabS.value = XX.map((item, index) => {
      let obj = {
        name: item.name,
        id: item.id,
        sort: index + 1 + "",
        type: "", //type是推荐1，不推荐给空
        surplusNum: 0,
        allNum: 0,
      };
      return obj;
    });
    console.log(tabS.value);
    // tabS.value = JSON.parse(decodeURIComponent(route.query.XX));
  }
}
CS();
//跳转到菜谱列表
function TZXX() {
  let li = encodeURIComponent(JSON.stringify(tabS.value));
  router.push({
    name: "i_life_ZGST_GQSXJ_CPlist",
    query: {
      XX: li, // 序列化对象
    },
  });
}
//切换星期
function onConfirm(val) {
  objXX.value.categoryId = val.value;
  XQname.value = val.text;
  showPicker.value = false;
}
function onClickLeft() {
  router.push({
    name: "i_life_ZGST_GQSXJ",
  });
}
//确认提交
function onSubmit() {
  objXX.value.mealtodishlist = tabS.value.map((item, index) => {
    let obj = {
      id: item.id,
      sort: index + 1 + "",
      type: "1", //type是推荐1，不推荐给空
      surplusNum: 0,
      allNum: 0,
    };
    return obj;
  });
  // console.log("1112",objXX.value);
  updateMealDishBack(objXX.value).then((res) => {
    if (res.resultCode == 1) {
      Notify({ type: "success", message: res.data });
      //新增成功后返回页面页面
      router.push({
        name: "i_life_ZGST_GQSXJ",
      });
    } else {
      Notify({ type: "warning", message: "修改失败" });
    }
  });
}
</script>

<style lang="scss" scoped>
.pull-refresh {
  background: #fff;
}
.XX {
  // display: flex;
  // align-items: baseline;
  // flex-wrap: wrap;
  margin-right: 5px;
  margin-bottom: 10px;
}
.btn {
  margin-top: 10px;
}
.XXbtn {
  margin-left: 10px;
}
</style>